<template>
  <div>
    <ul class="infiniteUl" id="customScroll0">
      <nut-infiniteloading
        container-id="customScroll0"
        :use-window="false"
        load-icon="refresh2"
        :has-more="isMore"
        @load-more="loadMore"
      >
        <li
          class="infiniteLi"
          v-for="(item, index) in list.list"
          :key="index"
          @click="handleItem({ ...item, url: list.url })"
        >
          <CARD0
            class="carditem"
            v-if="item.goods_list.length <= 1"
            :item="{ ...item, url: list.url }"
          >
            <div class="flex flexEnd box">
              <STATUSBTN
                :data="item"
                :type="2"
                @confirm="confirm"
                @refound="refound"
              />
            </div>
          </CARD0>
          <CARD1 class="carditem" v-else :item="{ ...item, url: list.url }">
            <div class="flex flexEnd box">
              <STATUSBTN
                :data="item"
                :type="2"
                @confirm="confirm"
                @refound="refound"
              />
            </div>
          </CARD1>
        </li>
      </nut-infiniteloading>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, computed, ref } from "vue";
import CARD0 from "../../../manage/components/orderCard0.vue";
import CARD1 from "../../../manage/components/orderCard1.vue";
import STATUSBTN from "@/components/orderStatusCard/orderStatus.vue";
const props = defineProps(["list", "hasMore"]);
const emits = defineEmits(["loadMore", "save", "confirm", "refound"]);

const confirm = (item: any) => {
  emits("confirm", item);
};

const refound = (item: any) => {
  emits("refound", item);
};

const loadMore = (n: any) => {
  emits("loadMore", n);
};

const isMore = computed(() => {
  return props.hasMore || false;
});
const getStatus = (n: {
  status: string | number;
  status_type: number | string;
}) => {
  if (n.status == 1) {
    if (n.status_type == 0) {
      return "待发货";
    }
    if (n.status_type == 1) {
      return "已发货";
    }
    if (n.status_type == 2) {
      return "已提货";
    }
    if (n.status_type == 3) {
      return "已收货";
    }
    if (n.status_type == 4) {
      return "待提货";
    }

    return "已支付";
  }
  if (n.status == 0) {
    return "待付款";
  }
  if (n.status == 1) {
    return "已取消";
  }
  if (n.status == 90) {
    return "待退款";
  }

  if (n.status == 98) {
    return "已取消";
  }
  if (n.status == 99) {
    return "已退款";
  }
  status: 99;
  status_type: 0;
};
const handleItem = (item: any) => {
  emits("save", item);
};
//   `logistics_type` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1.快递 2.自提',
</script>
<style scoped lang="scss">
.card-address {
  margin: 20px 0;
  background: #f7f8f9;
  padding: 20px 20px;
  .item-txt {
    color: #000000;
    font-size: 26px;
    font-weight: bold;
    padding-bottom: 5px;
  }
  .item-info {
    font-size: 24px;
    padding: 5px 0;
  }
  .p-l-10 {
    padding-left: 10px;
  }
  .p-r-10 {
    padding-right: 10px;
  }
  .item-txt-icon {
    display: block;
    width: 24px;
    height: 24px;
  }
  .item-txt-icon-p {
    display: block;
    width: 24px;
    height: 28px;
  }
  .edit {
    font-size: 24px;
    color: #999;
    padding: 20px 0;
  }
}
.infiniteUl {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.pub-txt {
  min-width: 250px;
}
:deep(.bottom-box) {
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.nut-infiniteloading .nut-infinite-bottom) {
  padding-top: 0 !important;
}
// .btn-box {
// 	padding: 30px 0px 0 30px;
// 	height: 60px;

// 	.btn {
// 		float: right;
// 		width: 146px;
// 		font-size: 26px;
// 		font-weight: 400;
// 		color: #40ae36;
// 		border: 2px solid #40ae36;
// 		background: #f9fffa;
// 		text-align: center;
// 		border-radius: 50px;
// 		padding: 10px 0;
// 	}
// 	.dbtn {
// 		float: right;
// 		width: 146px;
// 		font-size: 26px;
// 		font-weight: 400;
// 		color: #40ae36;
// 		border: 2px solid #40ae36;
// 		background: #f9fffa;
// 		text-align: center;
// 		border-radius: 50px;
// 		padding: 10px 0;
// 	}
// 	.db0 {
// 		margin-right: 20px;
// 		color: #000;
// 		border: 2px solid #999;
// 	}
// }
.box {
  padding: 4px 0;
}
</style>
